<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <link rel="stylesheet" type="text/css" href="css/gongkaik.css">
    <link rel="stylesheet" type="text/css" href="css/sucaiku.css">
    <link rel="stylesheet" type="text/css" href="css/denglu/denglu.css">
    <link rel="stylesheet" type="text/css" href="css/youxi.css">
    <link rel="stylesheet" type="text/css" href="css/fenye/paging.css"/>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
    <title>素材库</title>
</head>
<body>
<div class="gongkaiktop">
    <div class="header-bar">
        <div class="index-header">
            <!--头部左边-->
            <div class="index-header-left">
                <a href="#">
                    <img src="img/pipa-01.png" />
                </a>
            </div>
            <!--头部中间-->
            <div class="index-header-center">
                <div class="index-header-center-ul">
                    <ul class="index-header-center-ul-li">
                        <li><a href="codemao.html">首页</a></li>
                        <li ><a href="gongkaik.html">公开课</a></li>
                        <li><a href="#">赛事活动</a></li>
                        <li><a href="sucaiku.html" class="li-li li-li2">素材库</a></li>
                        <li ><a href="#">加盟合作</a></li>
                        <li ><a href="shequ.html">知识社区</a></li>
                    </ul>
                </div>
                <div class="pipa"><a href="#">PiPa一下</a></div>.
            </div>
            <!--头部右边-->
            <div class="index-header-right" id="index-header-R">
                <div class="index-header-right-1">
                    <div class="index-header-right-C-L"><img src="http://7xo6t4.com2.z0.glb.qiniucdn.com/user_0006.png" /></div>
                    <div class="index-header-right-C-S">
                        <!--未登录--><a href="#"><span id="zuce">注册</span></a>&nbsp;<span>/</span>&nbsp;<a href="#"><span id="denglu">登陆</span></a>
                        <!--完成登陆--><!--<span>bonniebonniebonnie</span>-->
                    </div>
                </div>
                <div class="index-header-right-C-W" id="index-header-W">
                    <ul class="index-header-right-ul">
                        <li><a>作品管理</a></li>
                        <li><a>社区信息</a></li>
                        <li><a>我的精灵</a></li>
                        <li><a>个人中心</a></li>
                        <li><a>账号设置</a></li>
                        <li><a>推出登陆</a></li>
                    </ul>
                </div>
                <!--弹出框-->
                <div class="hide-center-1">
                    <div class="hide-center">
                        <div id="formhead">
                            <div class="formhead-img"><img src="img/img36.png" /></div>
                            <div style="text-align: end;"><button type="button" id="close"><img src="img/gb.png" /></button></div>
                            <div class="input-1" id="input-1">
                                <form action="" method="">
                                    <input type="text" placeholder="请输入手机号码" class="input-1-input-1"></br>
                                    <!--<input type="text" placeholder="请输入验证码" style="width: 130px"> <input type="submit" value="获取验证码" style="width: 115px;background-color: #2e7acc;color: #ffffff;box-shadow: inset 0 -3px 0 0 #20558e;"></input></br>-->
                                    <input type="password" placeholder="设置密码"  class="input-1-input-2"></br>
                                    <input type="submit" value="注册" class="input-1-input-3" >
                                    <p style="float: left"><span>注册即同意</span><span style="color: #2074cf">用户协议</span></p><div style="float: right"><span id="return">返回登录</span></div>
                                </form>
                            </div>

                            <div class="input-1" id="input-2" style="display: none">
                                <form action="" method="">
                                    <input type="text" placeholder="请输入账号/手机号码" class="input-1-input-1"></br>
                                    <input type="password" placeholder="请输入密码"  class="input-1-input-2"></br>
                                    <input type="submit" value="登陆" class="input-1-input-3">
                                    <p style="float: left"><span>没有账号?</span><span style="color: #2074cf" id="return3">免费注册</span></p><div style="float: right"><span id="return1" style="color: #2074cf;display: none">账号密码登陆</span></div>
                                </form>
                            </div>
                        </div>

                        <div id="formbody" class="formbody1">
                            <div class="formbody-div">
                                <p>第三方登陆</p>
                                <div class="formbody-div-img">
                                    <div class="formbody-div-img-1">
                                        <img src="img/img22.png">
                                    </div>
                                    <div class="formbody-div-img-1">
                                        <img src="img/img23.png">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sucaiku-center">
    <div class="sucaiku-center-top">
        <div class="sucaiku-center-top-L">
            <ul>
                <li>
                    <div class="sucaiku-center-top-L-div sucaiku-center-top-L-div-back">
                       <img src="img/img13.png" class="sucai-img1">
                        <span class="span-7">素材商城</span>
                    </div>
                </li>
                <li>
                    <div class="sucaiku-center-top-L-div">
                        <img src="img/img14.png"  class="sucai-img2">
                        <span>我的素材</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="sucaiku-center-top-R">
            <div class="sucaiku-center-top-R-div">
                <input type="text" placeholder="素材搜索">
               <img src="img/img15.png">
            </div>
        </div>
    </div>
    <div class="sucaiku-center-bottom">
        <div class="sucaiku-center-bottom-t">
            <div class="sucaiku-center-bottom-q">
                <div id="id" class="sucaiku-center-bottom-f">角色</div><div id="id">背景</div><div id="id">声音</div>
            </div>
            <div class="sucaiku-center-bottom-w">
                <div class="sucaiku-center-bottom-w-top">
                    <span class="ccc">最近更新</span><span>最多使用</span><input type="checkbox" id="rType" name="sex"><label for="rType"></label>仅显示未购买
                    <span style="float: right;margin-right: 20px">共123个素材</span>
                </div>
                <div class="sucaiku-center-bottom-w-bottom">
                    <ul>
                        <li>
                            <div class="bbb scale-off">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                               <div class="sucaiku-center-bottom-w-wz">
                                   <div class="wenzi">
                                       <p>时钟射手</p>
                                       <img src="img/img17.png"/>
                                       <span>100</span>
                                   </div>
                                   <div class="anniu">
                                       <span>采集</span>
                                   </div>
                               </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="sucaiku-center-bottom-w sucaiku-center-bottom-w1">
                <div class="sucaiku-center-bottom-w-top">
                    <span>最近更新</span><span>最多使用</span><input type="checkbox" id="rType1" name="sex"><label for="rType1"></label>仅显示未购买
                    <span style="float: right;margin-right: 20px">共321个素材</span>
                </div>
                <div class="sucaiku-center-bottom-w-bottom">
                    <ul>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="sucaiku-center-bottom-w sucaiku-center-bottom-w1">
                <div class="sucaiku-center-bottom-w-top">
                    <span>最近更新</span><span>最多使用</span><input type="checkbox" id="rType2" name="sex"><label for="rType2" ></label>仅显示未购买
                    <span style="float: right;margin-right: 20px">共518个素材</span>
                </div>
                <div class="sucaiku-center-bottom-w-bottom">
                    <ul>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="bbb">
                                <div class="bbb-img"><img src="img/img16.png"></div>
                                <div class="sucaiku-center-bottom-w-wz">
                                    <div class="wenzi">
                                        <p>时钟射手</p>
                                        <img src="img/img17.png"/>
                                        <span>100</span>
                                    </div>
                                    <div class="anniu">
                                        <span>采集</span>
                                    </div>
                                </div>

                            </div>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="ifframe-div">
                <div class="box" id="box">
                    <button type="button" id="firstPage" class="turnPage first-page" disabled="disabled">首页</button>
                    <button class="turnPage" id="prePage" disabled="disabled">上一页</button>
                    <div class="pageWrap" style="width:300px">
                        <ul id="pageSelect" style="transition: all 600ms; transform: translateX(0px);">
                            <li class="sel-page">1</li><li class="">2</li><li class="">3</li><li class="">4</li>
                            <li class="">5</li><li class="">6</li><li class="">7</li><li class="">8</li><li class="">9</li>
                            <li class="">10</li><li class="">11</li><li class="">12</li><li class="">13</li><li class="">14</li>
                            <li class="">15</li><li class="">16</li><li class="">17</li><li class="">18</li><li class="">19</li>
                            <li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
                        </ul>
                    </div>
                    <button class="turnPage" id="nextPage">下一页</button>
                    <button type="button" id="lastPage" class="last-page">尾页</button>
                    <input type="text" placeholder="1" class="jump-text" id="jumpText">
                    <button type="button" class="jump-button" id="jumpBtn">跳转</button>
                    <p class="total-pages">共&nbsp;30&nbsp;页</p>
                    <p class="total-count">合计301条数据</p>
                </div>
            </div>

        </div>


    </div>
</div>
    <div class="tootele sucai" >
        <div class="tootele1">
            <div class="tootele-left">
                <p>联系我们</p>
                <p>广州栩栩如生教育科技有限公司</p>
                <p>官方网址：http://www.codeorg.com.cn/</p>
                <p>服务电话：180－2805-1936</p>
            </div>
            <div class="tootele-center">
                <p>服务QQ：281753448</p>
                <p>邮件地址：service@codeorg.com.cn</p>
                <p>总部地址：广州·海珠区·M+创工场·腾讯</p>
            </div>
            <div class="tootele-right">
                <div class="tootele-right1">
                    <p>官方服务号</p>
                    <img src="img/img04.png"/>
                </div>
                <div class="tootele-right2">
                    <p>产品体验</p>
                    <img src="img/img05.png"/>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/temp.js"></script>
<script type="text/javascript" src="js/fenye/paging.js"></script>
<script type="text/javascript">
    $('.bbb').each(function (i, e) {
        $(e).mouseenter(function () {
            $('.bbb-img>img').eq(i).removeClass('scale-off').addClass('scale-on')
            $(".anniu").eq(i).show()
        })
        $(e).mouseleave(function () {
            $('.bbb-img>img').eq(i).removeClass('scale-on').addClass('scale-off')
            $(".anniu").eq(i).hide()
        })
    });
    var setTotalCount = 301;
    $('#box').paging({
        initPageNo: 1, // 初始页码
        totalPages: 30, //总页数
        totalCount: '合计' + setTotalCount + '条数据', // 条目总数
        slideSpeed: 600, // 缓动速度。单位毫秒
        jump: true, //是否支持跳转
        callback: function(page) { // 回调函数
            console.log(page);
        }
    })
    //输入框焦点获取和失去时显示默认文字

</script>
</html>